<template>
    <div class="icon-select-container">
      <!-- 搜索框 -->
      <el-input
        v-model="searchText"
        placeholder="搜索图标..."
        clearable
        class="search-input"
      />
  
      <!-- 图标展示区域 -->
      <div class="icon-grid">
        <div 
          v-for="(icon, index) in filteredIcons" 
          :key="index"
          class="icon-item"
          :class="{ 'active': selectedIcon === icon }"
          @click="handleSelect(icon)"
        >
          <svg class="icon-svg" aria-hidden="true">
            <!-- 关键点：使用 ##{icon} 引用图标 -->
            <use :xlink:href="`#${icon}`" />
          </svg>
          <div class="icon-name">{{ icon }}</div>
        </div>
      </div>
  
      <!-- 空状态 -->
      <el-empty v-if="filteredIcons.length === 0" description="未找到匹配图标" />
    </div>
  </template>
  
  <script>
  import { getLatestIcons } from '@/api/wenda/homeConfig'
  
  export default {
    props: {
      value: String // 接收已选中的图标名称
    },
    data() {
      return {
        icons: [],    // 全部图标列表
        searchText: '', // 搜索关键词
        selectedIcon: this.value // 当前选中图标
      }
    },
    computed: {
      // 过滤后的图标列表
      filteredIcons() {
        return this.icons.filter(icon => 
          icon.toLowerCase().includes(this.searchText.toLowerCase())
        )
      }
    },
    watch: {
      value(newVal) {
        this.selectedIcon = newVal
      }
    },
    async mounted() {
      await this.loadIcons()
    },
    methods: {
      // 加载图标列表
      async loadIcons() {
        try {
          const res = await getLatestIcons()
          if (res.code === 200 && res.data) {
            this.icons = res.data
          }
        } catch (error) {
          console.error('图标加载失败:', error)
        }
      },
      // 选择图标
      handleSelect(icon) {
        this.selectedIcon = icon
        this.$emit('input', icon) // 更新 v-model
        this.$emit('change', icon) // 自定义事件
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .icon-select-container {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
  
    .search-input {
      margin-bottom: 16px;
    }
  
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 16px;
    }
  
    .icon-item {
      padding: 12px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
  
      &:hover {
        border-color: #409eff;
        background-color: #f5f7fa;
      }
  
      &.active {
        border-color: #409eff;
        background-color: #ecf5ff;
      }
    }
  
    .icon-svg {
      width: 24px;
      height: 24px;
      display: block;
      margin: 0 auto 8px;
      fill: currentColor; /* 继承父元素颜色 */
    }
  
    .icon-name {
      font-size: 12px;
      color: #909399;
      word-break: break-all;
    }
  }
  </style>